<script setup lang='ts'>
import { useRouter } from 'vue-router'
import useMenuModel from '@/composable/useMenuModel'

const router = useRouter()
const { menuList } = useMenuModel()

const goTo = (url: string) => {
    if (url) router.push(url)
}
</script>


<template>
  <transition name="fade" mode="out-in">
    <div class="section-content">
      <el-row :gutter="24">
        <el-col style="margin-bottom: 18px;" v-for="(item, index) in menuList" :key="index" :xs="24" :sm="12"
          :md="8" :lg="6">
          <el-card shadow="hover" class="module-card" @click="goTo(item.url)">
            <h4>{{ item.title }}</h4>
            <p>{{ item.description }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </transition>
</template>


<style scoped lang="scss">
.section-content {
  min-height: 300px;
}

.module-card {
  background-color: #1a1c23;
  border: 1px solid #2e303e;
  color: #e0e0e0;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px transparent;
  cursor: pointer;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px #f5c23880;
  }

  h4 {
    color: #ffa117;
  }
}
</style>